<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="css/iconfont.css">
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/styles.css">
<script src="js/jquery.1.12.4.min.js" charset="UTF-8"></script>
<script src="js/bootstrap.min.js" charset="UTF-8"></script>
<script src="js/swiper.min.js" charset="UTF-8"></script>
<script src="js/global.js" charset="UTF-8"></script>
<script src="js/jquery.DJMask.2.1.1.js" charset="UTF-8"></script>
<title>U袋网</title>
<!-- 引入layui样式和脚本 -->
<link rel="stylesheet" href="../admin/layui/css/layui.css">
<script src="../admin/layui/layui.js"></script>
</head>
<body>
	<!-- 顶部tab -->
	<!-- 引入头部 -->
	<jsp:include page="header.jsp"></jsp:include>

	<div class="content inner">
		<section class="filter-section clearfix">
			<ol class="breadcrumb">
				<li><a href="getAllHome">首页</a></li>
				<li class="active">热卖专区</li>
			</ol>
			<div class="filter-box">
				<div class="all-filter">
					<div class="filter-value" style="width: 1250px">
						<span href="" class="sale-title active">热卖专区</span>
					</div>
				</div>
			</div>
			<!-- <div class="sort-box bgf5">
				<div class="sort-text">排序：</div>
				<a href=""><div class="sort-text">
						销量 <i class="iconfont icon-sortDown"></i>
					</div></a> <a href=""><div class="sort-text">
						评价 <i class="iconfont icon-sortUp"></i>
					</div></a> <a href=""><div class="sort-text">
						价格 <i class="iconfont"></i>
					</div></a>
				<div class="sort-total pull-right">共1688个商品</div>
			</div> -->
		</section>
		<section class="item-show__div clearfix">
			<div class="pull-left" style="width: 1250px;">
				<div class="item-list__area clearfix">
					<c:forEach items="${proList }" var="pro">
						<div class="item-card">
							<a href="getProTuiTypeId?proId=${pro.proId }" class="photo">
								<img src="../admin/showPic/${pro.proUrl }" alt="${pro.proName }"
								class="cover">
								<div class="name">${pro.proName }</div>
							</a>
							<div class="middle">
								<div class="price">
									<small>￥</small>${pro.currentPrice }
								</div>
								<div class="sale no-hide">
									<a href="" data-pid="${pro.proId }" onclick="addToCat(this)">加入购物车</a>
								</div>
							</div>
							<div class="buttom">
								<div>
									销量 <b>${pro.salesAmount }</b>
								</div>
								<div>
									<a href="" style="color: black;" data-pid="${pro.proId }"
										onclick="addToWish(this)">收藏</a><span
										class="glyphicon glyphicon-heart"></span>
								</div>
								<!-- <div>
								评论 <b>1688</b>
							</div> -->
							</div>
						</div>
					</c:forEach>
				</div>
				<!-- 分页 -->
				<div class="" id="test"></div>
			</div>

		</section>
	</div>
	<!-- 分页脚本开始 -->
	<script type="text/javascript">
		function addToCat(obj) {
			//接受到商品id
			var pid = $(obj).data("pid");
			//接收到商品数量
			var num = 1;
			//发ajax请求服务端
			$.post("addShopping", {
				"pid" : pid,
				"num" : num
			}, function(res) {
				console.log(res);
				alert(res.msg)
			}, "json")

		}
		function addToWish(obj) {
			//接受到商品id
			var proId = $(obj).data("pid");
			//接收到商品数量
			//发ajax请求服务端
			$.post("addUIdWish", {
				"proId" : proId,
			}, function(res) {
				console.log(res);
				alert(res.msg)
			}, "json")
		}
		layui.use('laypage', function() {
			var laypage = layui.laypage;

			//执行一个laypage实例
			laypage.render({
				elem : 'test', //注意，这里的 test1 是 ID，不用加 # 号
				count : '${count}', //数据总数，从服务端得到
				limit : '${limit}', //每页条数
				curr : '${page}', //当前页数
				jump : function(obj, first) {
					if (!first) {
						console.log(obj); //分页组件的数据
						var page = obj.curr;
						var limit = obj.limit;
						window.location.href = "getProReMen?page=" + page
								+ "&limit=" + limit;
						// productDto.xxx是从服务端传来的值，注意格式：单引号，美元符号

					}
				}
			}); //分页渲染结束

		});
	</script>
	<!-- 右侧菜单 -->
	<!-- 引入右侧菜单 -->
	<jsp:include page="right-nav.jsp"></jsp:include>
	<!-- 底部信息 -->
	<!-- 引入脚部 -->
	<jsp:include page="footer.jsp"></jsp:include>
</body>
</html>